<template>
   
     <button class="button" :class="{'blue':type=='blue','geent':type=='geent',
     'orenge':type=='orenge','red': type=='red'}" @click="button_click">
        <slot></slot>
     </button>
      
</template>
<script>
export default {
   name:"Button",
   props:{
      type:{
         type:String,
      }
   },
   methods:{
      button_click(e){
         this.$emit('click',e)
      }
   }
}
</script>
<style>
  .button{
     width:98px;
     height: 40px;
     border-radius: 5px;
     border:none;
     border:1px solid #DCDFE6;
     background-color:white;
     color :#606266;
      outline: none;
      margin-right:20px;
  }
  .button:hover{
     color: cornflowerblue;
     background :rgba(236, 245, 255)
  }
  .button:focus{
     color: cornflowerblue;
     background :rgba(236, 245, 255)
  }
  /* 蓝色属性 */
  .blue{
     background-color:#409EFF;
     color :white;
      border: none;
  }
  .blue:hover{
     background :rgba(64, 158, 255,0.8);
     color: white;
  }
  .blue:focus{
     background :rgba(64, 158, 255,0.8);
     color: white;
  }
/* 绿色属性 */
   .geent{
      background-color: #67C23A;
      color:white;
       border: none;
     
   }
   .geent:hover{
      background :rgba(103, 194, 58,0.8);
      color :white;
   }
   .geent:focus{
       background :rgba(103, 194, 58,0.8);
      color :white;
   }

   /* 橙色属性 */
   .orenge{
      background-color: #E6A23C;
      color: white;
       border: none;
   }
   .orenge:hover{
      color:white;
      background:rgba(230, 162, 60,0.7)
   }
   .orenge:focus{
       color:white;
      background:rgba(230, 162, 60,0.7)
   }

   /* 红色属性 */
   .red{
      color:white;
      background-color:#F56C6C;
      border:none;
   }
   .red:hover{
      color: white;
      background: rgba(245, 108, 108,0.7)
   }
   .red:focus{
      color: white;
      background: rgba(245, 108, 108,0.7)
   }
</style>
